<template>
  <div style="">
    <Card :bordered="false">
    <Row>
      <Col span="18" style="text-align: left">
        <Date-picker type="datetime"  @on-change="startTime=$event" v-model="startTime" placeholder="选择开始日期"
                     style="width: 200px;margin-right: 10px"></Date-picker>
        <Date-picker type="datetime"  @on-change="endTime=$event" v-model="endTime" placeholder="选择结束日期"
                     style="width: 200px;"></Date-picker>
        <Button icon="ios-search" type="primary" @click="queryData(1)"></Button>
      </Col>
    </Row>
    </Card>
    <Card :bordered="false">
      <Table width="100%" :height="tabHisHeight" :columns="hisColumn" :data="historyMonitorList" ref="tab"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float:left;margin-top: 3px;">共{{total}}条</div>
        <div style="float: right;">
          <Page :total="total" show-sizer show-elevat
                :page-size="pageSize" :current="currentPage"
                @on-change="changePage" :page-size-opts="pageSizeOptions"
                @on-page-size-change='handlePageSize'>
          </Page>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  import urlSource from '../../../api/urlSource'

  export default {
    name: "historyOtherMonitorData",
    components: {},
    props: {
      row: {},
      deviceCode:{

      },
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        tabHisHeight: '',
        currentPage: 1,
        total: 0,
        pageSize: 20,
        pageSizeOptions: [20,30,50,80,100],
        eventTime: '',
        historyMonitorList: [],
        codeTypeList: [
          {
            code: 1,
            name: "状态变化",
          },
          {
            code: 2,
            name: "心跳",
          },
          {
            code: 3,
            name: "设备重启",
          },
        ],
        parkingStateList: [
          {
            code:0,
            name:'空闲',
          },
          {
            code:1,
            name:'占用',
          },
          {
            code:2,
            name:'初始化',
          }
        ],
        hisColumn: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '设备编号',
            key: 'deviceCode',
            align: 'center'
          },
          {
            title: '消息类型',
            key: 'code',
            align: 'center',
            render:(h,params) => {
              let codeType = '';
              this.codeTypeList.forEach(v => {
                if(params.row.code==v.code){
                  codeType = v.name;
                  return
                }
              })
              return ('div',[
                ('div',codeType)
              ])
            }
          },
          {
            title: '包号',
            key: 'packageNum',
            align: 'center'
          },
          {
            title: '车位状态',
            key: 'parkingState',
            align: 'center',
            render: (h,params) => {
              let parkingStateName = '';
              this.parkingStateList.forEach( v => {
                if(params.row.parkingState==v.code){
                  parkingStateName = v.name;
                  return;
                }
              })
              return ('div',[
                ('div',{
                  class: (params.row.parkingState==0)? "tagBtn1 tag-success1" : (params.row.parkingState==1)? "tagBtn1 tag-danger1" : "tagBtn1"
                },parkingStateName)
              ])
            }
          },
          {
            title: '磁场数据',
            key: 'xyzAxis',
            align: 'center',
            width:260,
            render:(h, params) => {
              let xyzAxis = ''
              if(params.row.xaxis){
                let xaxis = params.row.xaxis;
                let yaxis = params.row.yaxis;
                let zaxis = params.row.zaxis;
                let ck = params.row.reserve;
                xyzAxis = 'X:'+xaxis +' Y:'+yaxis+' Z:'+zaxis + ' CK:'+ ck;
              }else{
                xyzAxis = '—';
              }
              return h('div', [
                h('div',xyzAxis)
              ]);
            }
          },
          {
            title: '更新时间',
            key: 'eventTime',
            width: 200,
            align: 'center'
          },
        ],
      }
    },
    methods: {
      tranformDate(dateA) {
        let dateee = new Date(dateA).toJSON();
        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
        return date;
      },
      changePage (val) {
        this.currentPage = val;
        this.queryData();
      },
      handlePageSize(val){
        this.pageSize = val;
        this.queryData();
      },
      queryData(type){
        let url = urlSource.apiUrl + "monitorDevice/queryMonitorHis";
        //type 为 1 时，表示条件查询，需要要经当前页改为第一页
        if(type){
          this.currentPage = 1;
        }
        let params = {
          page: this.currentPage - 1,
          pagesize: this.pageSize,
          startTime: this.startTime ? this.tranformDate(this.startTime) : '',
          endTime: this.endTime? this.tranformDate(this.endTime) : '',
          deviceCode: this.deviceCode,
          type : 2
        }
        this.$http.post(url,params).then(res => {
          this.total = res.data.total;
          if(this.total==0){
            this.currentPage = 1;
          }
          let data = res.data.data;
          let dataTemp = [];
          data.forEach(v => {
            dataTemp.push({
              id: v.id,
              deviceCode: v.deivceCode,
              code: v.data.code,
              packageNum:v.data.packageNum ? v.data.packageNum : '—',
              parkingState:v.data.parkingState ? v.data.parkingState : '2',
              xaxis:v.data.xaxis,
              yaxis:v.data.yaxis,
              zaxis:v.data.zaxis,
              reserve:v.data.reserve,
              eventTime: v.eventTime
            })
          })
          this.historyMonitorList = dataTemp;
        }).catch(err => {

        });
      }
    },
    watch:{
      row:{//深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
          this.queryData(1);
        },
        deep:true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.queryData();
        this.tabHisHeight = window.innerHeight-310;
      })
    },

  }
</script>

<style lang="less">
  /*.tagBtn {*/
    /*background-color: rgba(64, 158, 255, 0.15);*/
    /*display: inline-block;*/
    /*height: 32px;*/
    /*width: 60px;*/
    /*text-align: center;*/
    /*line-height: 30px;*/
    /*font-size: 12px;*/
    /*color: #409eff;*/
    /*border-radius: 4px;*/
    /*-webkit-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
    /*border: 1px solid rgba(64, 158, 255, 0.2);*/
    /*white-space: nowrap;*/
    /*font-weight: bold;*/
  /*}*/
  /*.tag-success{*/
    /*background-color: rgba(103,194,58,.15);*/
    /*border-color: rgba(103,194,58,.2);*/
    /*color: #67c23a;*/
  /*}*/
  /*.tag-danger {*/
    /*background-color: hsla(0,87%,69%,.15);*/
    /*border-color: hsla(0,87%,69%,.2);*/
    /*color: #f56c6c;*/
  /*}*/
</style>
